<template>
    <Modal :mask-closable="false"
            v-model="historyVisible"
            title="历史维修记录"
            width="1200"
    >
        <Form :label-width="120" label-position="left">
            <Row :gutter="16">
                <Col span="8">
                    <FormItem label="维修单号：">
                        <Input v-model="searchParams.workorderNo" :placeholder="`${$t('common.inputInfo')}`"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="维修人：">
                        <Input v-model="searchParams.realname" :placeholder="`${$t('common.inputInfo')}`"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="故障性质：">
                        <Select v-model="searchParams.faultId" clearable filterable>
                            <Option v-for="m in typeList" :value="m.value" :key="m.value">{{ m.label }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="故障信息：">
                        <Input v-model="searchParams.faultNote" :placeholder="`${$t('common.inputInfo')}`"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="维修完成时间：">
                        <DatePicker
                                :value="dateTimeRange"
                                type="datetimerange"
                                placement="bottom-end"
                                :placeholder="`${$t('common.selectInfo')}`"
                                @on-change="handleRangeChange"
                        />
                    </FormItem>
                </Col>
                <Col span="4">
                    <Button type="primary" @click="onSearch">{{$t('common.Query')}}</Button>
                </Col>
            </Row>
        </Form>
        <div style="margin-top: 10px;">
            <Table
                    row-key="id"
                    :columns="columns"
                    :data="dataSource">
                <template slot-scope="{ row }" slot="action">
                </template>
            </Table>
            <div class="pageWrap">
                <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
            </div>
        </div>
        <!--查看详情-->
        <order-detail-modal ref="orderDetailModal"/>
    </Modal>
</template>

<script>
    import OrderDetailModal from "./orderDetailModal";
    export default {
        name: "repairHistoryModal",
        components: {OrderDetailModal},
        data() {
            return {
                total: 0,
                pageSize: 10,
                pageNum: 1,
                searchParams: {},
                dateTimeRange: [],
                pageSizeOption: [10, 20, 30],
                typeList: [{ label: '全部', value: undefined }],
                historyVisible: false,
                columns: [
                    {
                        title: '维修单号',
                        key: 'workorderNo',
                        align: 'center',
                        minWidth: 200,
                        render: (h, params) => {
                            return h('a',
                                {
                                    style: {
                                        color: 'blue',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleledgerDetail(params.row)
                                        }
                                    }
                                }, params.row.workorderNo)
                        }
                    },
                    {
                        title: '维修人',
                        key: 'mainMan',
                        align: 'center',
                        minWidth: 180,
                    },
                    {
                        title: '维修开始时间',
                        key: 'startTime',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '维修完成时间',
                        key: 'completeTime',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '故障性质',
                        key: 'faultName',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '故障信息',
                        key: 'faultNote',
                        align: 'center',
                        minWidth: 200,
                        tooltip: true
                    },
                    {
                        title: '解决方式及预防措施',
                        key: 'solutions',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '故障原因分析',
                        key: 'faultReason',
                        align: 'center',
                        minWidth: 200
                    },
                ],
                dataSource: []
            }
        },
        created() {
            this.getMainList()
        },
        methods: {
            //获取故障数据
            getMainList() {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderFaultNature/selectList',
                    params: {}
                }).then(res => {
                    if (res.code === 200) {
                        this.typeList = [...this.typeList, ...res.data]
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            show(deviceMId) {
                this.historyVisible = true
                this.searchParams.deviceMId = deviceMId
                this.getList()
            },
            handleRangeChange(val) {
                this.searchParams.completeBegin = val[0]
                this.searchParams.completeEnd = val[1]
            },
            //查看详情
            handleledgerDetail(order) {
                this.$refs.orderDetailModal.show(order)
            },
            //查询
            changePageSize(val) {
                this.pageSize = val
                this.getList()
            },
            changePageNum(val) {
                this.pageNum = val
                this.getList()
            },
            onSearch() {
                this.pageNum = 1;
                this.getList()
            },
            getList() {
                let params = {
                    pageNo:this.pageNum,
                    pageSize:this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (key === 'orgCode' && this.searchParams['orgCode']) {
                        const arr = this.searchParams[key]
                        const { length, last=length-1 } = arr
                        this.$set(params, key, arr[last])
                    }else {
                        if (this.searchParams[key]) {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }

                }
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderReport/list1',
                    params: params
                }).then(res => {
                    
                    if(res.code === 200){
                        this.dataSource = res.data.list
                        this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },

        }
    }
</script>

<style scoped lang="scss">
    /deep/.ivu-form-item-label {
        /*display: inline-block;*/
        /*width: 40%;*/
        /*height: 48px;*/
        /*line-height: 48px;*/
        background: #ffffff!important;
        text-align: right;
        border-right: 0!important;
        /*padding-right: 10px;*/
    }
    /deep/.ivu-form-item {
        margin-bottom: 20px!important;
        border-right: 0!important;
    }
</style>
